<script setup lang="ts">
import { onMounted, onUpdated, reactive, ref } from 'vue';
import { getWarehouse, getCompany } from "@/api/TimeMonitoring";



// 定义状态数组
const statuses = ['未监控', '报警中', '合格', '全部'];

// 使用 ref 来定义选中的状态
const selectedStatus = ref('全部'); // 默认选中的状态

// 定义点击事件处理器
function selectStatus(status: any, index: any) {
  selectedStatus.value = status;
  console.log(index);
  state.statusesId = index;
  findByCompany();
}


const state = reactive({
  warehouseData: [
    // {
    //   companyId: 0,
    //   companyName: "顺丰产业",
    //   companyAddress: "中国山东",
    //   warehouseId: 1,
    //   warehouseName: "二号仓库",
    //   warehouseAddress: "大连市有假村",
    //   meterNumber: 0,
    //   alarmNumber:0,
    //   manager: "吕雅静",
    //   phone: "1234567890",
    //   lng: 116.404,
    //   lat: 39.915,
    //   statusesId: 3
    // }
  ],
  company: [
    {
      id: 1,
      name: "xxx"
    }
  ],
  companyId: "",
  statusesId: "3",
  isDataLoaded: false, // 控制地图组件的渲染时机
})
// const show = ref(false);

// const infoWindowClose = () => {
//   show.value = false
// };
// const infoWindowOpen = () => {
//   show.value = true
// };


const currentInfoWindow = ref(null);

const infoWindowOpen = (index: any) => {
  currentInfoWindow.value = index;
};

const infoWindowClose = () => {
  currentInfoWindow.value = null;
};

async function getInfo(id: any, companyId: any) {
  var { data: { data } } = await getWarehouse(id, companyId);
  //console.log(data);
  var company = await getCompany();
  state.company = company.data.data;
  // console.log(company.data.data);
  // console.log(state.company);
  state.warehouseData = data;
  state.isDataLoaded = true;
}

async function findByCompany() {
  var { data:{data} } = await getWarehouse(state.statusesId, state.companyId);
  console.log(data);
  state.warehouseData = data;
}

onMounted(() => {
  getInfo(3, "");
});

</script>

<template>
  <div>
    仓库实时监控
    <div class="select">
      <el-select v-model="state.companyId" placeholder="企业名称" style="width: 240px" @blur="findByCompany()">
        <el-option v-for="item in state.company" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </div>
    <el-button v-for="(status, index) in statuses" :key="index"
      :class="['button', { 'highlight': selectedStatus === status }]" @click="selectStatus(status, index)">
      {{ status }}
    </el-button>
  </div>

  <div class="map" v-if="state.isDataLoaded">
    <baidu-map class="bm-view" :zoom="5" :center="{ lng: 116.404, lat: 39.915 }" :scroll-wheel-zoom="true">


      <bm-marker v-for="(item, index) in state.warehouseData" :key="index" :position="{ lng: item.lng, lat: item.lat }"
        :dragging="true" @click="infoWindowOpen(index)">
        <bm-info-window :show="currentInfoWindow === index" @close="infoWindowClose" @open="infoWindowOpen(index)"
          style="width: 300px; height: 100px; font-size: small;">
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 300px;">
            <div>企业名称: {{ item.companyName }}</div>
            <div>企业地址: {{ item.companyAddress }}</div>
            <div>库房名称：{{ item.warehouseName }}</div>
            <div>库房地址：{{ item.warehouseAddress }}</div>
            <div>仪表数量：{{ item.meterNumber }}</div>
            <div>报警数量：{{ item.alarmNumber }}</div>
            <div>管理者：{{ item.manager }}</div>
            <div>电话：{{ item.phone }}</div>
          </div>
        </bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<style scoped>
.map {
  width: 100%;
  height: 680px;
  background-color: white;
  margin-top: 20px;
  border-radius: 10px;
  display: flex;
  /* 启用 Flexbox */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

.bm-view {
  width: 98%;
  height: 96%;

}

.select {
  display: inline-block;
  margin: 5px;
  float: right;
}

.button {
  display: inline-block;
  margin: 5px;
  float: right;
}

.highlight {
  background-color: #409EFF;
  /* 高亮颜色 */
  color: white;
}
</style>